/* 
  学习目标：useEffect第二个参数使用总结
*/

import React, { useEffect, useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('');

  // 第二个参数三种用法：
  // 2. 传[] 。等同于 componentDidMount
  // 👍常用。
  // 作用：请求数据、开启定时器、使用DOM绑定一些事件
  useEffect(() => {
    console.log('我被执行了');
  }, []);

  // 3. 传[依赖项] .  等同于 componentDidMount，componentDidUpdate
  // 👍常用.  类似vue中的侦听器，开启了立即执行。
  // 作用：监听数据变化，缓存数据用。
  useEffect(() => {
    console.log('我被执行了');
    console.log(count, 'count');
  }, [count]);

  // 1. 不传。 等同于 componentDidMount，componentDidUpdate
  // ❌不常用。原因：每个state变化都会导致触发回调函数，容易造成页面卡顿。
  // useEffect(() => {
  //   console.log('我被执行了');
  // });

  return (
    <div>
      <button onClick={() => setMsg(msg + '!')}>点我修改Msg</button>
      <button onClick={() => setCount(count + 1)}>点我count+1</button>
    </div>
  );
}
